@charset "UTF-8";
@import "../../../style/theme/default/var.css";

.el-button+.el-button {
  margin-left: var(--theme-margin-base);
}

@component-namespace rfm {
  @b main {
    position:relative;
    padding-bottom: 23px;
    @e titleX {
      position: absolute;
      top: 0;
      left: 10px;
      font-size: var(--theme-font-size-base);
     }
    @e titleY {
       position: absolute;
       bottom: 0;
       right: 10px;
       font-size: var(--theme-font-size-base);
     }
    @e content {
      position: relative;
      padding: 23px 0 5px 15px;
      border-left: 1px solid var(--border-color-base);
      border-bottom: 1px solid var(--border-color-base);
      &:before, &:after {
                   position: absolute;
                   content: ' ';
                   width: 0;
                   height: 0;
                   border: 4px solid var(--border-color-base);
                   border-color: var(--border-color-base) var(--border-color-base) transparent transparent;
                 }
      &:before {
         top: 0;
         left: -5px;
         transform:rotate(-45deg);
       }
      &:after {
         bottom: -5px;
         right: 0;
         transform:rotate(45deg);
       }
    }
  }
  @b list {
    padding: 0;
    margin: 0 0 0 -10px;
    li {
      position: relative;
      display: flex;
      width: 100%;
      height: 110px;
      margin-bottom: 10px;
      list-style: none;
      .list-content {
        position: absolute;
        right: 0;
        left: 10px;
        font-size: var(--theme-font-size-small);
        padding: var(--theme-padding-middle) var(--theme-padding-base);
        z-index: 1;
        h4 {
          /*padding-bottom: var(--theme-padding-small);*/
          font-size: var(--theme-font-size-base);
          margin: 0;
        }
        p {
          margin: 0;
          padding: var(--theme-padding-small) 0 0;
        }
      }
      .list-bg {
        position: absolute;
        top: 0;
        left: 10px;
        bottom: 0;
        right: 0;
      }
    }
    @e content {
      position: relative;
      width: 100%;
      padding-left: var(--theme-padding-base);
    }
  }
  @b instructions {
    display: none;
    padding: var(--theme-padding-base);
    margin-bottom: var(--theme-margin-base);
    background-color: var(--theme-background-color-primary);
    p {
      margin-bottom: 0;
    }
    p:not(:last-child) {
      margin-bottom: 5px;
    }
  }
  @b form {
    padding: var(--theme-padding-base) var(--theme-padding-base) var(--theme-padding-small);
    margin-bottom: var(--theme-margin-base);
    background-color: var(--theme-background-color-primary);
  }
}

@media (max-width: 1370px) {
  @component-namespace rfm {
    @b list {
      li {
        height: 90px;
        .list-content {
          padding: var(--theme-padding-base);
          p {
            padding: 3px 0 0;
          }
        }
      }
    }
  }
}
